<template>
  <el-form ref="RegisterFormRef" :model="Form" :rules="Rules" class="registerForm">
    <el-form-item prop="username">
      <el-input type="text" v-model="Form.username" placeholder="请输入用户名" :prefix-icon="Avatar">
      </el-input>
    </el-form-item>
    <el-form-item prop="email">
      <el-input type="text" v-model="Form.email" placeholder="请输入邮箱" :prefix-icon="Avatar">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="Form.password" placeholder="请输入用户密码" :prefix-icon="Lock"></el-input>
    </el-form-item>
    <el-form-item prop="okpassword">
      <el-input type="okpassword" v-model="Form.okpassword" placeholder="请输入确认密码" :prefix-icon="Lock"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="register">
        注册
      </el-button>
      <el-button type="info" @click="resetForm">
        取消
      </el-button>
      <el-button type="info" @click="toLogin">
        去登录
      </el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from "vue";
import {Avatar, Lock} from "@element-plus/icons";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import route from "@/router";

export default defineComponent( {
  name: "Register",
  setup(){
    const Form = reactive({
      username:"",
      password:"",
      okpassword:""
    })
    // 邮箱
    const email = (rule, value, callback) => {
      const mal = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/
      if (rule.required && !value) {
        return callback(new Error('邮箱不能为空'))
      }
      if (value) {
        if (!(mal.test(value))) {
          callback(new Error('请输入正确邮箱'))
        } else {
          callback()
        }
      }
      return
    }
    //确认密码
    const okPasswd = (rule, value, callback) => {
      if (!value){
        return callback(new Error('确认密码不能为空'))
      } else{
        if (value != Form.password){
          return callback(new Error('确认密码与密码不一致'))
        }
      }
      return callback()
    }

    const Rules = {
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 10,
          message: '用户名长度在3-10个字符之间',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: '密码长度在6-20个字符之间',
          trigger: 'blur',
        },
      ],
      email:[
        {
          request : true,
          validator:email,
          trigger: 'blur',
        }
      ],
      okpassword:[
        {
          request : true,
          validator:okPasswd,
          trigger: 'blur',
        }
      ]
    }

    const register = () => {
      console.log("register")
      request.post("register", Form).then(async (res: any) => {
        if (res.code == 200) {
          await ElMessage.success("注册成功")
          route.push({path:'/Login',})
        }
      })
    }
    const RegisterFormRef = ref(null)
    const resetForm = () => {
      RegisterFormRef.value.resetFields()
    }
    const toLogin = () =>{
      route.push({path:"/Login"})
    }
    return {
      resetForm,
      register,
      Form,
      Rules,
      Avatar,
      Lock,
      toLogin
    }
  }
})
</script>

<style scoped>
.registerForm {

}
</style>